<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>医院信息管理</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="<%=request.getContextPath()%>/themes/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/select2_metro.css" />

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/chosen.css" />

    <link href="<%=request.getContextPath()%>/themes/bootstrap/css/datepicker.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/multi-select-metro.css">

    <!-- END PAGE LEVEL STYLES -->

</head>
<body >
<!--内容开始 -->
<c:set var="ctx" value="<%=request.getContextPath()%>"/>
<div class="row-fluid">

    <div class="span12">

        <div class="portlet box blue" id="form_wizard_1">

        <div class="portlet-title">

            <div class="caption">

                <i class="icon-reorder"></i> 添加医院信息

            </div>

        </div>

        <div class="portlet-body form">

        <form action="hospital/doAdd" class="form-horizontal" id="submit_form">

        <div class="form-wizard">

        <div class="navbar steps">

            <div class="navbar-inner">

                <ul class="row-fluid">

                    <li class="span3">

                        <a href="#tab1" data-toggle="tab" class="step active">

                            <span class="number">第一步</span>

                            <span class="desc"><i class="icon-ok"></i>基本信息</span>

                        </a>

                    </li>

                    <li class="span3">

                        <a href="#tab2" data-toggle="tab" class="step">

                            <span class="number">第二步</span>

                            <span class="desc"><i class="icon-ok"></i>详细信息</span>

                        </a>

                    </li>

                    <li class="span3">

                        <a href="#tab3" data-toggle="tab" class="step">

                            <span class="number">第三步</span>

                            <span class="desc"><i class="icon-ok"></i>配置项目</span>

                        </a>

                    </li>

                    <li class="span3">

                        <a href="#tab4" data-toggle="tab" class="step">

                            <span class="number">第四步</span>

                            <span class="desc"><i class="icon-ok"></i>确认</span>

                        </a>

                    </li>

                </ul>

            </div>

        </div>

        <div id="bar" class="progress progress-success progress-striped">

            <div class="bar"></div>

        </div>

        <div class="tab-content">

        <div class="alert alert-error hide">

            <button class="close" data-dismiss="alert"></button>

            验证不通过,请查看如下信息.

        </div>

        <div class="alert alert-success hide">

            <button class="close" data-dismiss="alert"></button>

            验证通过!

        </div>

        <div class="tab-pane active" id="tab1">

            <h3 class="block">请输入医院基本信息</h3>

            <div class="control-group">

                <label class="control-label">医院名称<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="hospitalName" value="${hospital.hospitalName}" />

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">医院别名</label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="hospitalAlias" id="hospitalAlias"  value="${hospital.hospitalAlias}" />

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">医院电话<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="phone"  value="${hospital.phone}"/>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">所在地区<span class="required">*</span></label>

                <div class="controls">

                    <select id="seachprov" name="province" class="span3" onchange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"  rvalue="${hospital.province}">
                    </select>
                    &nbsp;&nbsp;
                    <select id="seachcity" name="city" class="span3"  onchange="changeCity(this.value,'seachdistrict','seachdistrict');"  rvalue="${hospital.city}">
                    </select>
                    &nbsp;&nbsp;
                <span id="seachdistrict_div">
                    <select id="seachdistrict" name="seachdistrict">
                    </select>
                </span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">医院地址<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="hospitalAddress" value="${hospital.hospitalAddress}"/>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">医院属性<span class="required">*</span></label>

                <div class="controls">

                    <select name="hospitalNature" id="hospitalList" class="span6"   rvalue="${hospital.hospitalNature}">
                        <option value="1">公立医院</option>
                        <option value="2">私立医院</option>
                    </select>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">项目分级<span class="required">*</span></label>

                <div class="controls">

                    <select name="projectLevel" id="levelList" class="span6" rvalue="${hospital.projectLevel}">
                        <option value="1">一级</option>
                        <option value="2">二级</option>
                        <option value="3">三级</option>
                    </select>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">医院网址<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="hospitalUrl" value="${hospital.projectLevel}"/>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">特色项目<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="featuresProject"  value="${hospital.featuresProject}"/>

                </div>

            </div>

        </div>

        <div class="tab-pane" id="tab2">

            <h3 class="block">输入联系人信息</h3>

            <div class="control-group">

                <label class="control-label">姓名:<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="contactsName"  placeholder="请输入姓名" value="${hospitalContacts.contactsName}"/>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">性别:<span class="required">*</span></label>

                <div class="controls">

                    <label class="radio">

                        <input type="radio" name="gender" value="1" checked />   女

                    </label>

                    <label class="radio">

                        <input type="radio" name="gender" value="0"  />男

                    </label>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">手机:<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="contactsPhone"  placeholder="请输入手机号"  value="${hospitalContacts.contactsPhone}"/>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">职位:<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="position"  placeholder="请输入职位"  value="${hospitalContacts.position}"/>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">Email:<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="email"  placeholder="请输入邮箱地址"  value="${hospitalContacts.email}"/>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">QQ:<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="qq"  placeholder="请输入QQ" value="${hospitalContacts.qq}"/>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">微信:<span class="required">*</span></label>

                <div class="controls">

                    <input type="text" class="span6 m-wrap" name="wechat"  placeholder="请输入微信号" value="${hospitalContacts.wechat}"/>

                </div>

            </div>

        </div>
        <div class="tab-pane" id="tab3">

            <h3 class="block">请配置医院合约项目</h3>

            <div class="control-group">

                <label class="control-label">合约项目<span class="required">*</span></label>

                <div class="controls">
                    <div class="row-fluid">
                        <div class="span6 m-wrap">
                            <table class="table table-bordered table-hover" id="proTable">
                                <thead>
                                <tr>
                                    <th>项目名称</th>
                                    <th>设置提成比例(%)</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <c:forEach var="projects" items="${hospitalProject}">
                                        <td>${projects.projectName}</td>
                                       <td><input type="text" value="${projects.commission}" name="commission[0]" ><input type="hidden" value="${projects.projectID}" name="projectID[0]" ></td>
                                        <td><span class="label label-success" onclick="deleteRow(this)">删除</span></td>
                                    </c:forEach>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="span4 m-wrap">
                            <select id="partlist" class="span7 m-wrap" onchange="changePart()">
                                <c:forEach var="part" items="${partArray}">
                                    <option value="${part.id}">${part.partName}</option>
                                </c:forEach>
                            </select>
                            <select id="parlistDetail" class="span7 m-wrap" multiple="multiple" data-placeholder="选择项目" tabindex="1">
                                <c:forEach var="pro" items="${projectArray}">
                                    <option value="${pro.id}">${pro.projectName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </div>

            </div>

            <div class="control-group">

                <label class="control-label">合同到期日期<span class="required">*</span></label>

                <div class="controls">

                    <div class="input-append date date-picker" data-date="2015-10-10" data-date-format="yyyy-mm-dd" data-date-viewmode="years">

                        <input class="m-wrap m-ctrl-medium date-picker" readonly size="16" type="text" name="contractDeadline" value="${hosital.contractDeadline}" /><span class="add-on"><i class="icon-calendar"></i></span>

                    </div>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">认证状态<span class="required">*</span></label>

                <div class="controls">

                    <label class="radio">

                        <input type="radio" name="status" value="1" checked /> 是

                    </label>

                    <label class="radio">

                        <input type="radio" name="status" value="0"  />否

                    </label>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">认证证明<span class="required">*</span></label>

                <div class="controls">

                    <div class="fileupload fileupload-new" data-provides="fileupload">

                        <div class="input-append">

                            <div class="uneditable-input">

                                <i class="icon-file fileupload-exists"></i>

                                <span class="fileupload-preview"></span>

                            </div>

                            <span class="btn btn-file">

                            <span class="fileupload-new">选择文件</span>

                            <span class="fileupload-exists">更换</span>

                            <input type="file" class="default" name="certification"  value="${hosital.certification}" />

                            </span>

                            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">清除</a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="tab-pane" id="tab4">

            <h3 class="block">确认输入信息</h3>

            <h4 class="form-section">医院资料</h4>

            <div class="control-group">

                <label class="control-label">医院名称:</label>

                <div class="controls">

                    <span class="text display-value" data-display="hospitalName"></span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">医院别名:</label>

                <div class="controls">

                    <span class="text display-value" data-display="hospitalAlias"></span>

                </div>

            </div>


            <div class="control-group">

                <label class="control-label">医院电话:</label>

                <div class="controls">

                    <span class="text display-value" data-display="phone"></span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">医院地址:</label>

                <div class="controls">

                    <span class="text display-value" data-display="hospitalAddress"></span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">医院属性:</label>

                <div class="controls">

                    <span class="text display-value" data-display="hospitalNature"></span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">项目分级:</label>

                <div class="controls">

                    <span class="text display-value" data-display="projectLevel"></span>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">医院网址:</label>

                <div class="controls">

                    <span class="text display-value" data-display="hospitalUrl"></span>

                </div>

            </div>

            <div class="control-group">

                <label class="control-label">特色项目:</label>

                <div class="controls">

                    <span class="text display-value" data-display="featuresProject"></span>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">合同到期日期:</label>

                <div class="controls">

                    <span class="text display-value" data-display="contractDeadline"></span>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">联系人姓名:</label>

                <div class="controls">

                    <span class="text display-value" data-display="contactsName"></span>

                </div>

            </div>
            <div class="control-group">

                <label class="control-label">联系人电话:</label>

                <div class="controls">

                    <span class="text display-value" data-display="contactsPhone"></span>

                </div>

            </div>

        </div>

        </div>

        <div class="form-actions clearfix">

            <a href="javascript:;" class="btn button-previous">

                <i class="m-icon-swapleft"></i>上一步

            </a>

            <a href="javascript:;" class="btn blue button-next">

                下一步 <i class="m-icon-swapright m-icon-white"></i>

            </a>

            <a href="javascript:;" class="btn green button-submit" onclick="doEditHospital();">

                提交 <i class="m-icon-swapright m-icon-white"></i>

            </a>

        </div>

        </div>

        </form>

        </div>

        </div>

    </div>

</div>

<!--内容结束 -->

<!-- BEGIN PAGE LEVEL PLUGINS -->

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/bootstrap-fileupload.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/jquery.validate.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/additional-methods.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/jquery.bootstrap.wizard.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/chosen.jquery.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/select2.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/bootstrap-datepicker.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/date.js"></script>


<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->

<script src="<%=request.getContextPath()%>/themes/bootstrap/js/app.js"></script>

<script src="<%=request.getContextPath()%>/script/hospital.js"></script>

<script src="<%=request.getContextPath()%>/script/Area.js"></script>

<script src="<%=request.getContextPath()%>/script/common.js"></script>

<script src="<%=request.getContextPath()%>/script/AreaData_min.js"></script>

<!-- END PAGE LEVEL SCRIPTS -->
<script>

    jQuery(document).ready(function() {
        // initiate layout and plugins
        App.init();

        FormWizard.init();

        initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array,'${hospital.province}', '0', '0');

        if (jQuery().datepicker) {
            $('.date-picker').datepicker({
                rtl : App.isRTL(),
                format : "yyyy-mm-dd"
            });
        }

        $("#parlistDetail").live("click",function(){
            $("#proTable").find(".deleteflag").remove();
            var objValue=$("#parlistDetail option:selected").val();
            var objText=$("#parlistDetail option:selected").html();
            var i=0;
            $("#proTable").find("tr").each(function(){
                var tempVal=$(this).children("td").eq(0).html();
                if(tempVal==objText){
                    alert("此条项目已经被选择过了!");
                    i++;
                    return;
                }
            });
            if(i==0){
                var trHtml='<tr><td>'+objText+'</td> ';
                    trHtml+='<td><input type="text" value="" name="commission[0]" ><input type="hidden" value="'+objValue+'" name="projectID[0]" ><input type="hidden" value="'+objText+'" name="projectName[0]" ></td>';
                    trHtml+='<td><span class="label label-success" onclick="deleteRow(this)">删除</span></td></tr>';
                $("#proTable").append(trHtml);
                resetProjectsName();
            }
        });
    });

    function deleteRow(obj){
        $(obj).after('<input type="hidden" value="-1" name="status[0]" >');
        $(obj).parent().parent().hide();
        resetProjectsName();
    }

    function callbcakAddHospital(cb){
        alert("保存成功!");
        window.location = "${ctx}/hospital/";
    }

    function doEditHospital(){

       getData("POST","${ctx}/hospital/editHospital",true,getFormData($("#submit_form")),null,null,"callbcakAddHospital");

    }

</script>

<script src="<%=request.getContextPath()%>/script/select_auto_complete.js"></script>

</body>
</html>